<template>
	<view>
		<view class="container">
			<view style="height:320rpx;flex-direction: column;">
				<image class="head-img" :src="movie.movieImg" mode="aspectFill"></image>
				<view class="head-img-hover" :data-src="movie.movieImg">	
					<text class="main-title">{{movie.title}}</text>
					<view>
						<text class="sub-title">{{movie.country+"."+movie.year}}</text>
					</view>
					<view class="link">
						<text class="highlight-font">
							{{movie.wishCount}}
						</text>
						<text class="plain-font">
							人喜欢
						</text>
						<text class="highlight-font">
							{{movie.commentCount}}
						</text>
						<text class="plain-font">
							条评论
						</text>
					</view>
				</view>
			</view>
			<image class="movie-img" :src="movie.movieImg" :data-src="movie.movieImg"></image>
			<view class="summary">
				<view class="original-title">
					<text>{{movie.title}}</text>
				</view>
				<view class="flex-row">
					<text class="mark">评分</text>
					<starsTemplate :average="average"></starsTemplate>
				</view>
				<view class="flex-row">
					<text class="mark">导演</text>
					<text>{{director.name}}</text>
				</view>
				<view class="flex-row">
					<text class="mark">影人</text>
					<text style="margin-right: 40rpx;">{{movie.casts}}</text>
				</view>
				<view class="flex-row">
					<text class="mark">类型</text>
					<text>{{movie.generes}}</text>
				</view>
			</view>
			<view class="hr"></view>
			<view class="synopsis">
				<text style="color: #999;">剧情简介</text>
				<text class="summary-contnt">{{movie.summary}}</text>
			</view>
			<view class="hr"></view>
			<view class="cast">
				<text style="color:#999;margin-bottom: 40rpx;">影人</text>
				<view>
					<scroll-view class="cast-imgs" scroll-x="true" style="width: 100%">
					<view style="display: block;">
						<view class="cast-container" v-for="(item,key) in movie.castsInfo" :key="item.key">
						  <image class="cast-img" :src="item.img"></image>
						  <text class="cast-name">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../../../static/model/config.js";
	import util from "../../../static/model/util.js";
	import starsTemplate from "../stars/stars-template";
	export default {
		data(){
			return {
				api:config.api,
				id:"",
				movie:{},
				name:"",
				average:{},
				director:{}
			}
		},
		methods:{
			precessDoubanData(data){
				this.director={
					avatar:'',
					id:'',
					name:''
				};
				this.average={
					average:data.rating.average
				};
				if(data.directors[0] != null){
					if(data.directors[0].avatars != null){
						this.director.avatar=data.directors[0].avatars.large;
					};			
					this.director.name=data.directors[0].name;
					this.director.id=data.directors[0].id;
				};
				var movie={
					movieImg: data.images ? data.images.large : "",
					country:data.countries[0],
					title:data.title,
					originalTitle:data.original_title,
					wishCount:data.wish_count,
					commentCount:data.comments_count,
					year:data.year,
					generes:data.genres.join("、"),
					stars:data.rating.stars,
					casts:util.converToCastString(data.casts),
					castsInfo:util.converToCastInfos(data.casts),
					summary:data.summary
				};
				this.movie=movie;
			}
		},
		onLoad(option){
			this.id=option.movieId;
			var url = this.api+"/v2/movie/subject/"+this.id;
			util.http(url,"GET",this.precessDoubanData);
		},
		components:{
			starsTemplate
		}
	}
</script>

<style>
	page, view{display:block;}
	.container{width: 100%;display: flex;flex-direction: column;}
	.head-img{height: 320rpx;-webkit-filter:blur(20px);position: absolute;top: 0;left: 0;z-index: -1;}
	.head-img-hover{display: block;margin-top: 50rpx;}
	.main-title{font-size:40rpx;color: #fff;font-weight: bold;margin-left: 40rpx;letter-spacing: 2px;}
	.sub-title{font-size: 28rpx;color: #fff;margin-left: 40rpx;margin-top: 30rpx;}
	.link{display: flex;flex-direction: row;margin-top: 72rpx;margin-left: 40rpx;}
	.highlight-font{color: #f21146;font-size: 22rpx;margin-right: 10rpx;}
	.plain-font{color: #666;font-size: 22rpx;margin-right: 30rpx;}
	.movie-img{height: 238rpx;width: 175rpx;position: absolute;top: 160rpx;right: 30rpx;}
	.summary{margin-left: 40rpx;margin-top: 40rpx;color: #777;flex-direction: column;}
	.original-title{color: #1f3463;font-size: 24rpx;font-weight: bold;margin-bottom: 40rpx;}
	.flex-row{display: flex;flex-direction: row;margin-bottom: 10rpx;}
	.mark{margin-right: 30rpx;white-space: nowrap;color: #999;}
	.hr{margin-top: 45rpx;height: 3rpx;width: 100%;background-color: #d9d9d9;}
	.synopsis{margin-left: 40rpx;display: flex;flex-direction: column;margin-top: 50rpx;}
	.summary-contnt{margin-top: 20rpx;margin-right: 38rpx;line-height: 40rpx;letter-spacing: 1px;font-size: 26rpx;white-space: wrap;}
	.cast{margin-left: 40rpx;display: flex;flex-direction: column;margin-top: 50rpx;}
	.cast-container{display: inline-flex;flex-direction: column;margin-bottom: 50rpx;margin-right: 40rpx;width: 170rpx;text-align: center;white-space: normal;}
	.cast-imgs{white-space: nowrap;}
	.cast-img{width: 170rpx;height: 210rpx;}
	.cast-name{margin: 10rpx auto 0;word-break: break-all;}
</style>
